<!-- 托运单打印 -->
<template>
  <div class="mod-config">
    <div style="padding: 10px">
      <el-button type="primary" @click="getImg()">图片下载</el-button>
      <el-button type="primary" @click="getPdf()">PDF下载</el-button>
      <el-button type="primary" @click="toExcel">Excel下载</el-button>
    </div>
    <div
    ref="table"
      class="row"
      id="pdfDom"
      style="padding-top: 55px;color: #000; background-color: #fff"
    >
      <div style="display:flex;justify-content: space-between;">
         <img style="display:inline-block;width:200px;margin-bottom:8px;margin-left: 135px;" src="../assets/img/kapro1.png" alt="">
        <div style="padding-top: 40px;padding-left:0px;text-align: left;color: #777;font-style: italic;font-size: 18px;font-weight: 500;">
          <p style="margin:0;">电话 Телефон：4000-222-786&nbsp;&nbsp;&nbsp;&nbsp;wechat: CARGO_786</p>
          <p style="margin:0;">网站 Веб - сайт：www.cargo786.com.cn&nbsp;&nbsp;&nbsp;&nbsp;E-mail:cargo786@cargo786.com.cn</p>
        </div>
      </div>
      <table cellPadding=0 cellSpacing=0 style="border-collapse:unset;border-collapse:unset;table-lay" class="table_style tableContant">
        <tr>
          <td style="width:150px;">发货日期<br>Дата отправки</td>
          <td style="white-space: nowrap;width:160px" class="text">{{data.waybill_day_date}}</td>
          <td colspan="2" style="width:210px;">发货人<br>Грузоотправитель</td>
          <td colspan="2" style="width:300px;" class="text">{{data.receiver_name}}</td>
          <td style="width:140px;">手机<br>Моб</td>
          <td style="border-right:1px solid #333;width:160px" class="text">{{data.receiver_phone}}</td>
        </tr>
        <tr>
          <td>发货地<br>Станция отправления</td>
          <td class="text">{{data.str_city}}<br>{{data.str_city_ru}}</td>
          <td colspan="2">托运人<br>Грузополучатель</td>
          <td colspan="2" class="text">{{data.costomer}}</td>
          <td>手机<br>Моб</td>
          <td style="border-right:1px solid #333;" class="text">{{data.costomer_phone}}</td>
        </tr>
        <tr>
          <td style="font-weight:700;">运单号<br>Маркировка</td>
          <td style="font-weight:700;white-space: nowrap;" class="text">{{data.ticket_number}}</td>
          <td colspan="2" style="font-weight:700;">目的地<br>Станция назначения</td>
          <td colspan="2" style="font-weight:700;" class="text">{{data.end_city}}<br>{{data.end_city_ru}}</td>
          <td style="font-weight:700;">收货市场<br>Рынок</td>
          <td style="border-right:1px solid #333;font-weight:700;" class="text">{{data.market_name}}<br>{{data.market_name_ru}}</td>
        </tr>
        <tr>
          <td style="border-bottom:1px solid #333;">业务员<br>Продавец</td>
          <td style="border-bottom:1px solid #333;" class="text">{{data.sale_name}}</td>
          <td colspan="2" style="border-bottom:1px solid #333;">品名<br>Наименование</td>
          <td colspan="2" style="border-bottom:1px solid #333;" class="text">{{data.goods_name}}<br>{{data.goods_type_ru}}</td>
          <td style="border-bottom:1px solid #333;font-weight:700;">运输方式<br>Транспорта</td>
          <td style="border-bottom:1px solid #333;border-right:1px solid #333;font-weight:700;" class="text">{{data.transport}}<br>{{data.transport_ru}}</td>
        </tr>

        <div style="height:10px">&nbsp;</div>
      <!-- </table>
      <table border="1" cellPadding=0 cellSpacing=0 style="border-collapse:unset;border-collapse:unset;border:1.5px solid #000;margin-top:20px;" class="table_style tableContant"> -->
        <tr>
          <td>立方(m3)<br>Метр/куб</td>
          <td>重量(kg)<br>Вес (масса)</td>
          <td>总数量<br>количество</td>
          <td>包装方式<br>Способ<br>упаковки</td>
          <td colspan="2">总货值({{currency_symbol}})<br>Общая стоимочь</td>
          <td>保险%<br>Страховане</td>
          <td style="border-right:1px solid #333;">保险金额({{currency_symbol}})<br>Страховая Сумма</td>
        </tr>
        <tr>
          <td class="text">{{data.volume}}</td>
          <td class="text">{{data.weight}}</td>
          <td class="text">{{data.goods_number}}</td>
          <td class="text">{{data.packingMethod}}</td>
          <td colspan="2" class="text">{{data.price_original?data.price_original.goods_price:''}}</td>
          <td class="text">{{data.guaranteed_rate}}</td>
          <td style="border-right:1px solid #333;" class="text">{{data.price_original?data.price_original.protect_price_all:''}}</td>
        </tr>
        <tr>
          <td>垫付款{{currency_symbol=='￥'?'(￥)':'($)'}}<br>Авансовый взнос<br>за перевозку</td>
          <td>包装费{{currency_symbol=='￥'?'(￥)':'($)'}}<br>Упаковка</td>
          <td :colspan="currency_symbol=='$'?2:1" style="font-weight:700;" v-if="data.billing_method=='公斤'">单价($)(1kg)<br>цена(kg)</td>
          <td :colspan="currency_symbol=='$'?2:1" style="font-weight:700;" v-else-if="data.billing_method=='立方'">单价($)(1m³)<br>цена(m³)</td>
          <td :colspan="currency_symbol=='$'?2:1" style="font-weight:700;" v-else-if="data.billing_method=='鞋类'">单价($)(1双)<br>цена(пара)</td>
          <td :colspan="currency_symbol=='$'?2:1" style="font-weight:700;" v-else-if="data.billing_method=='整车'">单价($)(1车)<br>цена(машина)</td>
          <td style="font-weight:700;" v-if="currency_symbol!=='$'&&data.billing_method=='公斤'">单价({{currency_symbol}})(1kg)<br>цена(kg)</td>
          <td style="font-weight:700;" v-else-if="currency_symbol!=='$'&&data.billing_method=='立方'">单价({{currency_symbol}})(1m³)<br>цена(m³)</td>
          <td style="font-weight:700;" v-else-if="currency_symbol!=='$'&&data.billing_method=='鞋类'">单价({{currency_symbol}})(1双)<br>цена(пара)</td>
          <td style="font-weight:700;" v-else-if="currency_symbol!=='$'&&data.billing_method=='整车'">单价({{currency_symbol}})(1车)<br>цена(машина)</td>
          <td v-if="currency_symbol!=='$'" style="width:150px;">汇率<br>курс</td>
          <td :colspan="currency_symbol=='$'?2:1">运费({{currency_symbol}})<br>Кредиторская<br>задолженность</td>
          <td style="font-weight:700;">总金额({{currency_symbol}})<br>Итого Сумма</td>
          <td style="border-right:1px solid #333;">付款方式<br>Способ оплаты</td>
        </tr>
        <tr>
          <td v-if="this.currency_symbol!=='￥'" class="text">{{data.advance_payment_price}}</td>
          <td v-else class="text">{{data.advance_payment_price_user}}</td>
          <td v-if="this.currency_symbol!=='￥'" class="text">{{data.pack_price}}</td>
          <td v-else class="text">{{data.pack_price_user}}</td>
          <td :colspan="currency_symbol=='$'?2:1" style="font-weight:700;" class="text">{{data.unit_price}}</td>
          <td v-if="currency_symbol!=='$'" style="font-weight:700;" class="text">{{data.price_original?data.price_original.unit_price:''}}</td>
          <td v-if="currency_symbol!=='$'" class="text">{{data.exchange_rate}}</td>
          <td :colspan="currency_symbol=='$'?2:1" class="text">{{data.price_original?data.price_original.transport_price:''}}</td>
          <td style="font-weight:700;" class="text">{{data.price_original?data.price_original.receivable:''}}</td>
          <td style="border-right:1px solid #333;" class="text">{{data.pay_type_current}}</td>
        </tr>
        <tr>
          <td style="border-bottom:1px solid #333;">备注<br>Дополнение</td>
          <td style="border-bottom:1px solid #333;border-right:1px solid #333;" colspan="7" class="text">{{data.waybill_remakes}}</td>
        </tr>
      </table>
      <table  class="table_style table_text" style=" border-top:0;margin-top: 10px;">
        <tr>
          <td style="text-align:left;font-size:16px;padding-left: 2px;" col0n="6">
              托运单中的运输条款:
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">1.</span> 托运人承诺:托运人委托运输的货物均符合中华人民共和国进出口相关法律法规，不属于国家明令限制出口的货物，若承运货物中存在违禁品的，所有损失由托运人自行承担。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">2.</span> 
              托运人提供的托运货物信息(包括但不限于货物品名、材质、款号、数量、重量、尺寸等)必须与实际交付的货物相符;如不相符，托运货物在运输期间发生的额外费用或损失(如货物延迟到达、海关查验罚款、 海关扣货、罚没等)均由托运人自行承担。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">3.</span> 
              托运货物的包装应当符合法定的标准，若因包装不当造成货物毁损灭失的，由托运人自行承担相应损失。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">4.</span> 
              运输期间若因不可抗力因素(包括但不限于国内外法定节假日、地震、台风、洪水、战争或政治暴乱等)造成货物运输滞留或延迟，运输时限自行顺延，承运人无需承担任何延迟交货责任。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">5.</span> 
              托运货物运送至指定交货地点后,承运人应当及时通知托运人提货; 托运人提货时应现场检查货物情况 ,如若托运货物外包装完好，视为承运人已完成运输义务;如货物交付后发现短缺少货问题，承运人概不负责。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">6.</span> 
              托运人提货时应按本托运单载明的运费及其他费用金额向承运人支付所有费用;若因托运人或其指定的付款人支付原因导致承运人收款账号被公安机关等司法机关冻结、扣划的，所有责任由托运人承担; 若给承运人造成损失的，托运人应当赔偿承运人发生的全部损失。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">7.</span> 
              托运人未及时支付运输费用或超过三天不提取货物，自第四天起，每延迟提货一日，托运人应共同按照本托运单载明的运输费用 2%为标准,向承运人支付保管费;如若托运人超过十五天未提取货物的,承运人有权按无主货物自行处理托运货物，托运人应当直接向承运人支付该托运单载明的所有费用。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">8.</span> 
              托运货物在运输过程中如发生丢失或破损的，相关赔付标准以承运人托运货物时出示的报价单中载明的标准为准。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 20px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">9.</span> 
              承运人将托运单以微信或承运人公众号、APP、小程序等方式发送给托运人进行确认，托运人在 24 小时内未明确回复的，视为托运人默认该托运单中载明的所有信息及条款。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 25px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">10.</span> 
              此托运单结算运费以该单据开据时当日的汇率为准。
            </td>
          </tr>
          <tr>
            <td style="text-align:left;position: relative;padding-left: 25px;font-size:14px;">
              <span style="position: absolute;left: 2px;top: 0;">11.</span> 
              本公司拥有以上规定的最终解释权。
            </td>
          </tr>
      </table>
      <table style="margin-top:17px;" border="1" cellPadding=0 cellSpacing=0  class="table_style tableContant2" id="tableNew">
          <tr>
            <td style="white-space: nowrap;">发货日期<br>Дата отправки</td>
            <td style="white-space: nowrap;">运单号<br>Маркировка</td>
            <td style="white-space: nowrap;width:300px;">品名<br>Наименование</td>
            <td style="white-space: nowrap;">箱数<br>Количество<br>коробок</td>
            <td style="white-space: nowrap;">款号<br>Артикул <br>товара</td>
            <td style="white-space: nowrap;">数量<br>количество</td>
            <td style="white-space: nowrap;">重量(kg)<br>Вес (масса)</td>
            <td style="white-space: nowrap;">立方(m3)<br>Метр/куб</td>
            <td style="white-space: nowrap;">备注<br>Дополнение</td>
          </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "PdfDemo",
  data() {
    return {
      stock_number:JSON.parse(this.$route.query.data).stock_number,
      data:{},
      htmlTitle: "托运单",//pdf文件名
      currency_symbol:'$',
    };
  },
  filters: {},
  mounted() {
  },
  beforeMount() {
    //this.$route.query.data接收路由跳转传参
    let obj=JSON.parse(this.$route.query.data)
    this.$get("waybillInfo", obj).then((res) => {
        this.data=res.data
        this.data.receivable=Math.round(this.data.receivable)
        if(res.data.currency=="人民币"){
          this.currency_symbol='￥'
        }else if(res.data.currency=="卢布"){
          this.currency_symbol='₽'
        }else{
          this.currency_symbol='$'
        }
        // eventBus.$emit("Loading",true)
        // this.$get("get_waybill_package_info", {stock_number:obj.stock_number}).then((res) => {
        //   eventBus.$emit("Loading",false)
          let arr=res.data.packages;

          var tableNew = document.getElementById("tableNew");
          let trNew=document.querySelectorAll("tr.trNew")
          trNew.forEach((item,i) => {
              tableNew.removeChild(item)
          });
          arr.forEach((item,k)=>{
            let tr=document.createElement("tr");
            tr.classList.add('trNew')
            if(k===0){
              tr.innerHTML=`
              <td rowspan=${arr.length+1} class="text">${this.data.waybill_day_date}</td>
              <td rowspan=${arr.length+1} class="text">${this.data.ticket_number}</td>
              <td rowspan=${arr.length+1} class="text">${item.goods_name}</td>
              <td class="text">${item.number}</td>
              <td class="text">${item.model_number}</td>
              <td class="text">${item.goods_number}</td>
              <td class="text">${item.package_weight}</td>
              <td class="text">${item.volume}</td>
              <td class="text">${item.remarks}</td>`
              tableNew.append(tr)
            }else{
              tr.innerHTML=`
              <td class="text">${item.number}</td>
              <td class="text">${item.model_number}</td>
              <td class="text">${item.goods_number}</td>
              <td class="text">${item.package_weight}</td>
              <td class="text">${item.volume}</td>
              <td class="text">${item.remarks}</td>`
              tableNew.append(tr)
            }
          })
          let tr=document.createElement("tr");
          tr.classList.add('trNew')
          tr.innerHTML=`
          <td class="text">合计</td>
          <td class="text"></td>
          <td class="text">${this.data.goods_number}</td>
          <td class="text">${this.data.weight}</td>
          <td class="text">${this.data.volume}</td>
          <td class="text"></td>`
          tableNew.append(tr)
        // });
        
      });
  },
  methods: {
      toExcel(){
        window.location.href =`${process.env.API_ROOT}/index.php/excel_generate?type=11&waybill_id=${JSON.parse(this.$route.query.data).waybill_id}`
      },
  },
};
</script>

<style scoped >
.mod-config {
  height: 100%;
  overflow: auto;
}
#pdfDom {
  width: 1180px;
  margin: auto;
  padding: 30px;
}
.mod-config >>> .el-table th {
  height: 40px;
  padding: 0 2px 0 4px;
  background-color: rgb(192, 192, 192);
  color: #000;
  text-align: center;
  font-weight: 400;
}
.table_style td,
th {
  padding: 5px 0;
  font-size: 15px;
}

.table_style {
  /* border-collapse: collapse; */
  /* border: 1px solid #000; */
  width: 101%;
  text-align: center;
  margin-bottom: 9px;
  font-weight: 500;
  margin-left: 1px;
}
.table_text td{
  padding: 0 0;
}
.tableContant td{
  border-left:1px solid #333;border-top:1px solid #333
}

.text {
  /* border-bottom: 1px solid #000; */
  text-align: center;
  /* width: 100px; */
}
/* table,table tr th, table tr td { border:1px solid #0094ff; }
        table { 
        width: 200px; 
        min-height: 25px; 
        line-height: 25px; 
        text-align: center; 
        border-collapse: collapse; 
        padding:2px;
        }   */
</style>
